<template>
  <div>
    <img class="image" :src="imgUrl" />
  </div>
</template>

<script>
import { computed } from "vue";
const DefPath = process.env.NODE_ENV === "production" ? imageDefUrl : "";
export default {
  name: 'v-img',
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const imgUrl = computed(() => {
      let url = props.src || "";
      let idx = url.indexOf("images");
      if (idx == -1) return url;
      let fileName = url.substr(idx + 7);
      if (DefPath) {
        return `${DefPath}${fileName}`;
      } else {
        return require(`@/images/${fileName}`);
      }
    });

    return {
      imgUrl,
    };
  },
};
</script>

<style lang='scss' scoped>
.image {
  width: 100%;
  display: block;
}
</style>